<template>
  <div class="outer">
    <h1>App中的count{{count}}</h1>
    <h1>App中的数组{{list}}</h1>
    <button @click="unmountCount">我不想再接受list传递的count数据了</button>
   <List @count="getCount" @list="getItem" ref="list" />
    <hr />
    <Header ref="header" />
  </div>
</template>

<script>
// import _ from "lodash";
import List from "./components/List";
import Header from "./components/Header";
export default {
  name: "App",
  data() {
    return {
      count:0,
      list: [],
    };
  },
  mounted() {
    // 绑定一次性事件
    this.$refs.header.$once("count",(value)=>{
      alert(value)
    })
  },
  components: {
    List,
    Header,
  },
  
  methods: {
    getCount(count) {
      this.count = count;
    },
    getItem(item) {
      this.list.push(item);
    },
    message() {
      alert("count改了改了");
    },
    unmountCount() {
      //想要卸载某个实例上的某些事件,也是使用$off方法,第一个参数是字符串或者数组
      // this.$refs.list.$off("count");
      this.$refs.list.$off(["count", ]);
    },
  },
};
</script>

<style>
.outer {
  height: 400px;
  background-color: aqua;
}
</style>